<style type="text/css">
	.tag-list-li{
		margin-bottom:15px;
		padding:15px;
		border:1px solid #eee;
	}
	.tag-list-li input.am-form-field{
		width:120px;
		min-width:120px;
		padding:5px 6px;
		border-color:#eee;
		font-size:14px;
	}
	.tag-list-child{
		margin-top:15px;
		display:flex;
		flex-wrap:wrap;
	}
	.tag-list-child li{
		min-width:120px;
		position:relative;
	}
	.tag-list-child li > i{
		position:absolute;
		right:5px;
		top:3px;
		color:#999
	}
	.tag-list-base input.am-form-field{
		border-left:4px solid #23abf0;
	}
	.tag-list-base .am-badge,.tag-list-li > .am-fr .am-badge{
		margin:3px 0 0 8px;
		padding:6px 15px;
	}
</style>
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title a m-cf">用户标签</div>
                </div>
                <div class="widget-body">
					<div class="page_toolbar am-margin-bottom-xs am-cf">
                    <?php if (checkPrivilege('transform.tags/add')): ?>

						<div class="am-form-group am-fl">
							<div class="am-btn-toolbar">
								<div class="am-btn-group am-btn-group-xs">
									<a class="am-btn am-btn-success am-radius am-btn-sm add_tags_type">
										<span class="am-icon-plus"></span> 新增分类
									</a>
                                    
								</div>
							</div>
						</div>
                        <?php endif; ?>
						
					</div>
					<div class="row tag-list am-cf">
						<form action="" method="post" class="am-form">
                            {{volist name="list" id="type"}}
                            <!--循环开始-->
							<div class="tag-list-li am-cf">
								<div class="am-fl">
										<div class="tag-list-base am-cf">
											<input type="text" value="{{$type.name}}" class="am-form-field am-fl typeinput" data-id="{{$type.id}}">
                                            <a class="am-badge am-btn-default am-fl" delete-type="{{$type.id}}">
                                                <span class="am-icon-trash"></span> 删除分类
                                            </a>
											<a class="am-badge am-badge-success am-fl add_tags" data-typeid="{{$type.id}}">
												<span class="am-icon-plus"></span> 新增标签
											</a>
                                            
										</div>
										<ul class="tag-list-child" id="doc-modal-list">
                                        {{volist name="type.tags" id="tag"}}
											<li><input type="text" value="{{$tag.name}}" class="am-form-field tagsinput" data-id="{{$tag.id}}"><i class="am-icon-close" delete-tags="{{$tag.id}}"></i></li>
                                        {{/volist}}
                       
										</ul>
								</div>
							</div>
							<!--循环结束-->
                            {{/volist}}
							
						</form>
					</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="tpl-add_tags_type" type="text/template">
    <div class="am-padding-xs am-padding-top">
        <form class="am-form tpl-form-line-form" method="post" action="">
            <div class="am-tab-panel am-padding-0 am-active">
				<div class="am-form-group">
				    <label class="am-u-sm-3 am-form-label"> 分类名称 </label>
				    <div class="am-u-sm-8 am-u-end">
				        <input type="text" min="0" class="tpl-form-input" placeholder="请输入分类名称" id="name" name="data[name]" >
				    </div>
				</div>
            </div>
        </form>
    </div>
</script>

<script id="tpl-add_tags" type="text/template">
    <div class="am-padding-xs am-padding-top">
        <form class="am-form tpl-form-line-form" method="post" action="">
            <div class="am-tab-panel am-padding-0 am-active">
				<div class="am-form-group">
				    <label class="am-u-sm-3 am-form-label"> 标签名称 </label>
				    <div class="am-u-sm-8 am-u-end">
                    <input type="hidden" id="typeid" name="data[typeid]" >
				        <input type="text" min="0" class="tpl-form-input" placeholder="请输入标签名称" id="name" name="data[name]" >
				    </div>
				</div>
            </div>
        </form>
    </div>
</script>


<script id="tpl-edit" type="text/template">
    <div class="am-padding-xs am-padding-top">
        <form class="am-form tpl-form-line-form" method="post" action="">
        </form>
    </div>
</script>


<script>
    $(function () {
        /* 新增标签分类 */
        $('.add_tags_type').on('click', function () {
            var data = $(this).data();
            $.showModal({
                title: '新增标签分类'
                , area: '460px'
                , content: template('tpl-add_tags_type', data)
                , uCheck: true
                , success: function ($content) {
                    /*
									$content.find('form').ajaxSubmit({
										type: 'post',
										dataType: 'json',
										url: '<?= url('tags/add') ?>',
										data: {user_id: data.id},
										success: function (result) {
											$('#true_name').val(result.true_name);
											$('#true_mobile').val(result.true_mobile);
										}
									});
                    */
                }
                , yes: function ($content) {
                    $content.find('form').myAjaxSubmit({
                        url: '<?= url('transform.tags/add_type') ?>',
                        data: {name: data.name}
                    });
                    return true;
                }
            });
        });

        /* 新增标签 */
        $('.add_tags').on('click', function () {
            var data = $(this).data();
            var typeid = $(this).data('typeid');
            $.showModal({
                title: '新增标签'
                , area: '460px'
                , content: template('tpl-add_tags', data)
                , uCheck: true
                , success: function ($content) {
                }
                , yes: function ($content) {
                    $content.find('form').myAjaxSubmit({
                        url: '<?= url('transform.tags/add_tags') ?>',
                        data: {name: data.name,typeid:typeid}
                    });
                    return true;
                }
            });
        });


        $('.tagsinput').on('change', function() {
            var content = template('tpl-edit', []);
            $(this).myAjaxSubmit({
                url: '<?= url('transform.tags/edit_tags') ?>',
                data: {
                    id: $(this).data('id'),
                    name: $(this).val()
                 }
            });
        });

        $('.typeinput').on('change', function() {
            var content = template('tpl-edit', []);
            $(this).myAjaxSubmit({
                url: '<?= url('transform.tags/edit_type') ?>',
                data: {
                    id: $(this).data('id'),
                    name: $(this).val()
                 }
            });
        });


        $(document).on('click', '[delete-tags]',function() {
            var id = $(this).attr('delete-tags');
            $.post('<?= url('transform.tags/delete_tags') ?>',{id:id},function(res){
                if(res.code==1){
                    location.reload();
                }else{
                    layer.msg(res.msg);
                }
            });
        });

        $(document).on('click', '[delete-type]',function() {
            var id = $(this).attr('delete-type');
            $.post('<?= url('transform.tags/delete_type') ?>',{id:id},function(res){
                
                if(res.code==1){
                    location.reload();
                }else{
                    layer.msg(res.msg);
                }
            });
        });


        
    });
</script>

